<template>
  <el-form label-position="top">
    <el-row :gutter="10">
      <template v-for="(field,prop) in view.fields">
        <el-col :span="12" v-if="!['id','sort','create_time','modify_time','saved'].includes(prop as string)">
          <el-form-item :prop="prop">
            <template #label>
              <el-space>
                <el-tooltip effect="dark" placement="top-start" :enterable="false">
                  <template #content>
                    <el-space>
                      <el-text size="small" tag="b" type="primary">{{ field.prop }}</el-text>
                      <el-text size="small" tag="b" type="success">{{ field.domain }}</el-text>
                    </el-space>
                  </template>
                  <el-text tag="b">{{ field.label }}</el-text>
                </el-tooltip>
                <el-button
                    v-if="changed.includes(field.prop as string)"
                    size="small" type="warning" link
                    @click="reset(field.prop as string)"
                >
                  <fa icon="refresh"></fa>
                </el-button>
              </el-space>
            </template>
            <m-cell :field="field" :bean="bean" :disabled="false" :db="db"></m-cell>
          </el-form-item>
        </el-col>
      </template>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">

import MCell from "../cell/MCell.vue";
import {computed, onMounted, ref} from "vue";
import _ from "lodash";
import type {DaoTypes, DataItem} from "../../types/tool/dao.types.ts";
import type {MetaView} from "../../types/tool/meta.types.ts";

const props = defineProps<{ item: DataItem, view: MetaView, db: DaoTypes }>()
const bean = ref<DataItem>({})

const changed = computed(() => {
  return Object.keys(props.view?.fields || {}).filter(key => !_.isEqual(props.item[key], bean.value[key]))
})

function reset(prop: string) {
  bean.value[prop] = props.item[prop]
}

function getData() {
  const entries = changed.value.map(prop => [prop, bean.value[prop]])
  return Object.fromEntries(entries)
}

onMounted(() => {
  bean.value = _.cloneDeep(props.item)
})

defineExpose({getData})

</script>

<style scoped>

</style>